<!--
 * @Author: pancc 527847805@qq.com
 * @Date: 2023-04-23 15:57:53
 * @LastEditors: pancc 527847805@qq.com
 * @LastEditTime: 2023-05-10 15:35:21
 * @FilePath: \pcj\src\components\o-drawer\index.vue
 * @Description: 这里是查看节点详情的页面
-->
<template>
    <div class="task">
        <el-drawer v-model="drawer.show" size="45%" :with-header="false" :before-close="handleClose">
            <el-tabs v-model="drawer.tabsValue" tab-position="top" @tab-change="tabHandleChange">
                <el-tab-pane label="节点信息" :name="1">
                    <ul class="header-buttons">
                        <li></li>
                        <li class="dis-flex">
                            <z-button v-if="forms.canOper" @click="onOneClickFinished">一建完成</z-button>
                            <z-button v-if="forms.canOper" @click="onForcedFinish">强制完成</z-button>
                        </li>
                    </ul>
                    <!-- 修改节点负责人及时间 -->
                    <ul class="task-header">
                        <li>
                            <span>节点设置（编辑后点击保存)</span>
                        </li>
                        <li>
                            <z-button v-if="forms.canSave" @click="onTaskEdit" size="small">保存</z-button>
                        </li>
                    </ul>
                    <el-form class="content" :inline="true" :model="forms" label-width="100px">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="负责人">
                                    <el-select v-model="forms.officeIds" multiple placeholder="请选择"
                                        :disabled="!forms.canChangeOffice" style="width: 320px;">
                                        <el-option v-for="item in option.user" :key="item.id" :label="item.name"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="截止日期">
                                    <el-date-picker class="date-picker" type="date" v-model="forms.abortDate"
                                        :disabled="!forms.canChangeOffice" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                        placeholder="截止日期" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-for="(item) in forms.orderAudits" :key="item.auditLevel">
                                <el-form-item :label="item.auditLevel + '级审批人'">
                                    <el-select v-model="item.auditOfficeIds" multiple placeholder="请选择"
                                        :disabled="!item.canChangeAuditOffice" style="width: 320px;">
                                        <el-option v-for="item in option.user" :key="item.id" :label="item.name"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>
                    <!-- 相关审批 -->
                    <div v-if="forms.taskType === 1">
                        <ul class="task-header mt-10">
                            <li>
                                <span>相关审批</span>
                            </li>
                            <li>
                                <z-button v-if="forms.taskType === 1 && forms.canAuditBack" @click="onAuditBackOut"
                                    size="small">撤销</z-button>
                                <z-button v-if="forms.taskType === 1 && forms.canAudit" @click="onAuditPass"
                                    size="small">同意</z-button>
                                <z-button v-if="forms.taskType === 1 && forms.canAudit" @click="onAuditReject"
                                    size="small">驳回</z-button>
                                <z-button v-if="forms.taskType === 1 && forms.canAuditSubmit" @click="onAuditSubmit"
                                    size="small">提交审批</z-button>
                            </li>
                        </ul>
                        <el-table :data="forms.orderBuyAuditRecords" class="flexible-table w-100" style="max-height: 500px;"
                            border stripe tooltip-effect>
                            <el-table-column type="index" label="序号" align="center" width="60" />
                            <el-table-column label="内容" prop="content" align="center" />
                            <el-table-column label="状态" prop="statusName" align="center" />
                            <el-table-column label="操作人" prop="creatorUserName" align="center" />
                            <el-table-column label="操作时间" align="center">
                                <template #default="scope">
                                    {{ extDayTime(scope.row.creationTime) }}
                                </template>
                            </el-table-column>>

                        </el-table>
                    </div>
                    <!-- 相关状态 -->
                    <div v-if="forms.taskType === 9">
                        <ul class="task-header mt-10">
                            <li>
                                <span>相关状态</span>
                            </li>
                            <li>

                            </li>
                        </ul>
                        <el-radio-group class="content" style="padding: 20px;" v-model="radio" @change="onTaskStatusChange">
                            <el-radio :label="1">未开始</el-radio>
                            <el-radio :label="5">已生效</el-radio>
                            <el-radio :label="9">已完成</el-radio>
                            <el-radio :label="10">强制完成</el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 相关数量 -->
                    <div v-if="[2, 3, 4, 5].includes(forms.taskType)">
                        <ul class="task-header mt-10">
                            <li>
                                <span>相关数量</span>
                            </li>
                            <li>
                                <z-button v-if="[2, 3, 4, 5].includes(forms.taskType) && forms.canOper" @click="onAddNumber"
                                    size="small">添加数量</z-button>
                                <z-button v-if="[2, 3, 4, 5].includes(forms.taskType) && forms.canOper"
                                    @click="onEditNumber" size="small">修改数量</z-button>
                            </li>
                        </ul>
                        <el-table :data="forms.orderBuyPlanNumbers" class="flexible-table w-100" style="max-height: 500px;"
                            border stripe tooltip-effect>
                            <el-table-column type="index" label="序号" align="center" width="60" />
                            <el-table-column label="产品编号" prop="productSerialNo" align="center" />
                            <el-table-column label="产品名称" prop="productName" align="center" />
                            <el-table-column label="产品数量" prop="productNumber" align="center" />
                            <el-table-column label="计划数量" prop="planNumber" align="center" />
                            <el-table-column label="完成数量" prop="normalNumber" align="center" />
                            <el-table-column label="异常数量" prop="damageNumber" align="center" />
                            <el-table-column label="待确认量" prop="waitConfirmNumber" align="center" />
                            <el-table-column label="未完成量" prop="remainNumber" align="center" />
                        </el-table>
                    </div>
                    <!-- 相关金额 -->
                    <div v-if="[6, 7, 8].includes(forms.taskType)">
                        <ul class="task-header mt-10">
                            <li>
                                <span>相关金额</span>
                            </li>
                            <li>
                                <z-button v-if="[6, 7, 8].includes(forms.taskType) && forms.canOper"
                                    @click="onAddAmount(forms.taskAmount, forms.normalAmount, forms.damageAmount)"
                                    size="small">添加金额</z-button>
                                <z-button v-if="[6, 7, 8].includes(forms.taskType) && forms.canOper"
                                    @click="onEditAmount(forms.taskAmount)" size="small">修改金额</z-button>
                            </li>
                        </ul>
                        <div class="content" style="padding: 20px; 0px;">
                            <el-row class="w-100" :gutter="20">
                                <el-col :span="5">
                                    <div class="task-amount-col"><span>订单金额：</span><span>{{ forms.orderAmount }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="task-amount-col"><span>计划金额：</span><span>{{ forms.taskAmount }}</span></div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="task-amount-col"><span>完成金额：</span><span>{{ forms.normalAmount }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="task-amount-col"><span>异常金额：</span><span>{{ forms.damageAmount }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="task-amount-col"><span>剩余金额：</span><span>{{ forms.remainAmount }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="15">
                                    <el-progress class="mt-10" :text-inside="true" :stroke-width="24" :percentage="100"
                                        status="success" />
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <!-- 工作报告 -->
                    <ul class="task-header mt-10">
                        <li>
                            <span>工作报告</span>
                        </li>
                        <li>
                            <el-switch class="mr-10" v-model="forms.workReportSwitch" @change="onReportSwitch" size="small"
                                active-text="订单" inactive-text="节点" />
                            <z-button @click="onReportAdd()" size="small">添加</z-button>

                        </li>
                    </ul>
                    <el-table :data="forms.orderWorkReports" class="flexible-table w-100" style="max-height: 500px;" border
                        stripe tooltip-effect>
                        <el-table-column type="index" label="序号" align="center" width="60" />
                        <el-table-column label="内容" prop="content" align="center" />
                        <el-table-column label="提醒人员" align="center">
                            <template #default="scope">
                                {{
                                    scope.row.offices.map(n => {
                                        return n.name
                                    }).join(',')
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="发起时间" align="center">
                            <template #default="scope">
                                {{ extDayTime(scope.row.creationTime) }}
                            </template>
                        </el-table-column>>

                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="操作信息" :name="2"> </el-tab-pane>
            </el-tabs>
        </el-drawer>

        <auditEdit v-model="dialog.auditShow" :addData="dialog.aduitEditData" @onAuditSubmitBack="onAuditSubmitBack">
        </auditEdit>
        <amountEdit v-model="dialog.amountShow" :editData="dialog.amountEdit" @onAmountSubmitBack="onAmountSubmitBack">
        </amountEdit>
        <workReportEdit v-model="dialog.reportShow" :addData="dialog.reportEditData" @onLoad="onLoad()"></workReportEdit>
    </div>
</template>
<script setup>
import { reactive } from "vue";
import { post } from '@/api/index';
import auditEdit from './components/auditEdit.vue';
import amountEdit from './components/amountEdit.vue';
import workReportEdit from './components/workReportEdit.vue';
import { extDayTime } from '@/config/newday';
let $message = inject('$message');
const store = useStore();

let storeUser = computed(() => store.state.user);

let emit = defineEmits(['update:modelValue', 'onTaskEditBack', 'onAuditPassBack', 'onAuditBack', 'onMoreAuditBack', 'onAmountSubmitBack', 'onReportSwitchBack', 'onLoad']);
let props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    trackType: {
        type: Number,
        default: 0
    },
    editData: {
        type: Object,
        default: () => {
            return {};
        }
    }
});

let drawer = reactive({
    show: false,
    loading: false,
    tabsValue: 1,
    tabs: [
        { label: '节点信息', value: 1 },
        { label: '操作信息', value: 2 }
    ]
});

let dialog = reactive({
    auditShow: false,
    aduitEditData: {},
    reportShow: false,
    reportEditData: { reportSourceType: props.editData.sourceType },
    amountShow: false,
    amountEdit: {},
})

let option = reactive({
    user: []
});

// 默认负责人
let userOptions = async (keyword) => {
    let { result } = await post('User/GetSelectPage', { keyWord: (keyword || ''), pageIndex: 1, pageSize: 50 });
    option.user = result.items;
};
userOptions('');

let formsInit = () => {
    return reactive({
        taskName: '',
        taskType: 0,
        sourceType: 0,
        id: 0,
        orderBuyId: 0,
        officeIds: [],
        orderAudits: [],
        canChangeOffice: false,    // 是否可以修改负责人
        canChangeAbortDate: false, // 是否可以修改截止日期
        canAudit: false,           // 是否可以审批
        canAuditSubmit: false,     // 是否可以提交审批
        canAuditBack: false,       // 是否可以撤回审批
        canSave: false,            // 是否可以保存修改的截止日期和负责人
        canOper: false,            // 是否可以操作节点
        workReportSwitch: false,
        orderAmount: 0,
        taskAmount: 0,
        normalAmount: 0,
        damageAmount: 0,
        orderWorkReports: [],
        orderBuyAuditRecords: [],
        orderBuyPlanNumbers: []
    });
};
let forms = formsInit();
watch(
    () => props.modelValue,
    val => {
        drawer.show = val;
        if (!val) return;
        if (!storeUser.value.length) store.dispatch('getUser');
        drawer.tabs = 1;
        const formData = formsInit();
        Object.keys(formData).map(r => {
            forms[r] = props.editData[r];
        });
    },
    {
        immediate: true
    }
);

// 关闭抽屉
const handleClose = () => {
    emit('update:modelValue', false);
};

// 切换tab操作
const tabHandleChange = async val => {
    console.log('tabVal', val);
};

// 一键完成
const onOneClickFinished = async () => { };

// 强制完成
const onForcedFinish = async () => { };

// 保存节点
const onTaskEdit = async () => {
    emit('onTaskEditBack', forms);
};

// 审核通过
const onAuditPass = async () => {
    emit('onAuditPassBack', { id: forms.id, content: "通过" });
    // await post('OrderBuyTask/Audit', { id: forms.id, content: "通过" });
    // $message.success("审核通过");
};

// 审核驳回
const onAuditReject = () => {
    dialog.aduitEditData['id'] = forms.id;
    dialog.aduitEditData['submitType'] = 2;
    dialog.auditShow = true;
};

// 提交
const onAuditSubmit = () => {
    dialog.aduitEditData['id'] = forms.id;
    dialog.aduitEditData['submitType'] = 1;
    dialog.auditShow = true;
};

// 撤销审核
const onAuditBack = () => {
    emit('onAuditBack', { id: forms.id });
};

// 审核(通过/驳回)
const onMoreAuditBack = (val) => {
    emit('onMoreAuditBack', val);
    dialog.auditShow = false;
}

// 添加金额
const onAddAmount = async (taskAmount, normalAmount, damageAmount) => {
    dialog.amountShow = true;
    dialog.amountEdit = {
        id: forms.id,
        amount: (taskAmount - normalAmount - damageAmount) || 0,
        submitType: 2 // 2.添加金额
    };
};

// 修改金额
const onEditAmount = async (taskAmount) => {
    dialog.amountShow = true;
    dialog.amountEdit = {
        id: forms.id,
        amount: taskAmount || 0,
        submitType: 1 // 1.修改金额
    };
};

// 回写金额节点
const onAmountSubmitBack = (val) => {
    emit('onAmountSubmitBack', val);
    dialog.amountShow = false;
}

// 修改状态
const onTaskStatusChange = () => {

}

// 添加工作报告
const onReportAdd = () => {
    dialog.reportEditData.sourceId = forms.orderBuyId;
    dialog.reportEditData.sourceTaskId = forms.id;
    dialog.reportEditData.sourceType = forms.sourceType;
    dialog.reportEditData.user = option.user;
    dialog.reportShow = true;
}

const onReportSwitch = (val) => {
    emit('onReportSwitchBack', val)
}

// 重新加载
const onLoad = () => {
    emit("onLoad");
    dialog.auditShow = false;
    dialog.reportShow = false;
}


// 添加数量
const onAddNumber = async () => { };

// 修改数量
const onEditNumber = async () => { };


</script>

<style lang="scss">
.task {
    :deep(.el-tabs__header) {
        margin-bottom: 0px;
    }

    &-header {
        background-color: #d6f2f7;
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        padding: 0px 10px;

        li {
            display: flex;
            align-items: center;
        }
    }

    &-amount-col {
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        // justify-content: center;
    }

    .header-buttons {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;

    }

    .content {
        display: flex;
        padding-top: 18px;
        border: 1px solid #e5e8ef;
    }
}
</style>


